import { InputNumber } from "antd";
import { useEffect, useState } from "react";
import styles from './inputNumberRange.module.css';

export default function InputNumberRange({ value, onChange }) {
  const [value1, setValue1] = useState(Array.isArray(value) ? value[0] : undefined);
  const [value2, setValue2] = useState(Array.isArray(value) ? value[1] : undefined);

  useEffect(() => {
    if (onChange) onChange(value1 != null && value2 != null ? [value1, value2] : undefined);
    // eslint-disable-next-line
  }, [value1, value2]);

  return (
    <div className={styles.range}>
      <InputNumber value={value1} onChange={setValue1}></InputNumber>
      <span>-</span>
      <InputNumber value={value2} onChange={setValue2}></InputNumber>
    </div>
  );
}